<template>
	<view class="page">
		<block v-if="emptyText==''">
		<view class="article_top">
			<view class="article_top_title f_semibold twolist-hidden">{{ article.title }}</view>
			<view class="article_top_time">{{ setTime(article.createtime) }}</view>
			<view class="article_image">
				<image :src="article.image" mode="aspectFill"></image>
			</view>
		</view>
		<view class="m_l_48 m_r_48">
			<jyf-parser :html="article.content" :domain="domain" lazy-load ref="article" selectable show-with-animation use-anchor @error="error" @imgtap="imgtap" @linkpress="linkpress" @parse="parse" @ready="ready">
				加载中...
			</jyf-parser>
		</view>
		<view class="look_num">
			<text class="navy_blue">{{article.reading}}</text>
			<text class="f-c-9">浏览</text>
		</view>
		<view class="article_share">
			<view class="article_share_btn">
				<image class="p-r" :src="imgPrefix('/static/image/icon/article_details_share_icon.png')"></image>
				<text>分享</text>
				<button open-type="share" class="share-btn"></button>
			</view>
		</view>
		<view class="article_list">
			<view class="article_list_top dis-flex flex-x-between">
				<view class="list_title navy_blue">推荐文章</view>
				<view class="get_more dis-flex flex-y-center"  @click="more()">
					<text class="f_26 navy_blue">更多</text>
					<image :src="imgPrefix('/static/image/icon/next.png')"></image>
				</view>
			</view>
			<article-list :articleList="recommend" @bind-index="bindArticleDetail"></article-list>
		</view>
		<view class="teacher-info" :style="{ 'padding-top': statusBarHeight + 15 + 'px' }" v-if="teacherCouser&&teacherCouser.teacher">
			<view class="content">
				<!-- 教师信息 -->
				<view class="dis-flex flex-dir-column">
					<view class="dis-flex">
						<view class="headeravatar p-r">
							<image :src="teacherCouser.teacher.headeravatar" class="img-url" mode="aspectFill" lazy-load></image>
							<image v-if="teacherCouser.teacher.grade != 0" class="p-a teacher_grade" :src="teacherCouser.teacher.grade == 1? imgPrefix('/static/image/teacher/grade1.png'): teacherCouser.teacher.grade==2?
							imgPrefix('/static/image/teacher/grade2.png'): imgPrefix('/static/image/teacher/grade3.png')"></image>
						</view>
						<view class="flex-box flex-dir-column">
							<view class="f_40 f_normal title onelist-hidden">{{ teacherCouser.grade.title }}{{ teacherCouser.language.title }}{{ teacherCouser.teacher.nickname }}</view>
							<view class="dis-flex">
								<text class="type f_26 f_normal language_type_text" :class="'lan_' + teacherCouser.language.class">{{ teacherCouser.language.title }}</text>
								<view class="price">
									<text class="f_36">￥{{ teacherCouser.price }}</text>
									<text class="f_24">/小时</text>
								</view>
							</view>
						</view>
					</view>
					<view class="dis-flex">
						<text class="lable f_26 f_normal teacher" v-if="teacherCouser.classdata == 0||teacherCouser.classdata==1">教师上门</text>
						<text class="lable f_26 f_normal student" v-if="teacherCouser.classdata == 0||teacherCouser.classdata==2">学生上门</text>
						<text class="lable f_26 f_normal" :class="[teacherCouser.teacher.grade == 1?'g1':'',teacherCouser.teacher.grade == 2?'g2':'',teacherCouser.teacher.grade == 3?'g3':'']" v-if="teacherCouser.teacher.grade != 0">{{ teacherCouser.teacher.grade == 1?'铜':teacherCouser.teacher.grade == 2?'银':'金' }}牌教师</text>
						<text class="lable f_26 f_normal" v-for="(item, index) in teacherCouser.teacher.tag" :key="index">{{ item.tag_name }}</text>
					</view>
					<view class="dis-flex flex-x-between">
						<view class="f_24 gery1">
							教龄
							<text class="navy_blue">{{ teacherCouser.teacher.teaching_year }}年</text>
							· 已授
							<text class="navy_blue">{{ teacherCouser.course_count }}课</text>
						</view>
						<text class="gery1">{{ teacherCouser.teacher.distance }}</text>
					</view>
				</view>
				<view class="boder-bottom mt26" style="margin-bottom: 26rpx;"></view>
				<!-- 图片组 -->
				<scroll-view scroll-x="true" width="100%" style="white-space: nowrap;">
					<view class="urls-box" v-if="teacherCouser.teacher.images">
						<image v-for="(item, index) in teacherCouser.teacher.images" @tap.stop="bindImage(teacherCouser.teacher.images, index)"
						:key="index" :src="item" mode="aspectFill" lazy-load></image>
					</view>
				</scroll-view>
				<!-- tag -->
				<scroll-view v-if="teacherCouser.teacher.tag.length > 0" scroll-x width="100%" style="white-space: nowrap;">
					<view class="tag f_22 dis-flex">
						<view class="dis-flex flex-y-center" v-for="(item, index) in teacherCouser.teacher.tag" :key="index">
							<image :src="imgPrefix('/static/image/icon/teacher_detail_tag.png')" lazy-load></image>
							<text>{{ item.tag_name }}</text>
						</view>
					</view>
				</scroll-view>
				<view v-if="teacherCouser.teacher.images.length!=0" class="boder-bottom mt26"></view>
			</view>
		</view>
		<!-- 教学特点 -->
		<view class="trait-box box" v-if="teacherCouser.teacher.trait">
			<view class="title f_32 f_normal">教学特点</view>
			<view class="trait gery1 f_24 f_normal">{{ teacherCouser.teacher.trait }}</view>
		</view>
		<!-- 在授课程 -->
		<view class="schooling-box box" @click="closeBalanceLowPopup" v-if="teacherCouser.teacher">
			<view class="title f_32 f_normal m_b_38">在售课程</view>
			<view class="schooling gery1 f_24 f_normal dis-flex">
				<image class="study" :src="imgPrefix('/static/image/icon/study.png')"></image>
				<view class="dis-flex flex-box flex-y-center flex-x-between">
					<view class="">
						<view class="f_32 f-c1">上门一对一教学</view>
						<view class="f_22 f-c2">个性化课程辅导，量身打造教学计划</view>
					</view>
					<view class="next"><image :src="imgPrefix('/static/image/icon/teacher_detail_next.png')" lazy-load></image></view>
				</view>
			</view>
		</view>
		<!-- 教师评价 -->
		<view class="box comment-box" v-if="teacherCouser.comments&&teacherCouser.comments.comments">
			<view class="title f_32 f_normal">教师评价</view>
			<view class="comment">
				<view class="score dis-flex">
					<view class="synthesize flex-box">
						<view class="m-b-18 f_28">综合评分</view>
						<view class=""> <image
								v-for="(item, index) in 5"
								:key="index"
								:src="
									index < teacherCouser.comments.com_score
										? imgPrefix('/static/image/icon/comment_status_1.png')
										: imgPrefix('/static/image/icon/comment_status_0.png')
								"
								lazy-load
							></image>
						</view>
					</view>
					<view class="result flex-box dis-flex flex-y-center flex-dir-column">
						<view class="m-b-18 f_28">效果满意度</view>
						<view class="f_28">{{ teacherCouser.comments.result_like }}</view>
					</view>
					<view class="serve flex-box dis-flex flex-y-center flex-dir-column">
						<view class="m-b-18 f_28">服务满意度</view>
						<view class="f_28">{{ teacherCouser.comments.service_like }}</view>
					</view>
				</view>
				<view :class="teacherCouser.comments.tag.length > 0 ? 'tag-box dis-flex' : ''">
					<view v-for="(item, index) in teacherCouser.comments.tag" :key="index" class="tag">{{ item.tag_name }}</view>
				</view>
			</view>
			<comment-list :commentList="teacherCouser.comments.comments" :type="1"></comment-list>
			<view class="f_24 gery1 t-c p24" @click="skipComment">查看全部评论（{{ teacherCouser.comment_count }}）</view>
		</view>
		<!-- 教学经历 -->
		<view class="box experience-list-box" v-if="teacherCouser.teacher&&teacherCouser.teacher.experience.length > 0">
			<view class="title f_32 f_normal">教学经历</view>
			<view v-for="(item, index) in teacherCouser.teacher.experience" :key="index" class=" item">
				<view class="dis-flex flex-x-between">
					<view class="f_28 navy_blue m_r_32 name">{{ item.corporation }}</view>
					<view class="f_22 time">
						{{ item.starttime }}
						<text v-if="item.endtime != ''">-{{ item.endtime }}</text>
					</view>
				</view>
				<view class="f_24 gery1">{{ item.title }}</view>
				<view class="f_24 gery1 describe">{{ item.content }}</view>
			</view>
			<view class="f_24 gery1 t-c p24" @click="skipExperience">查看全部经历</view>
		</view>
		<!-- 更多推荐 -->
		<view class="box recommend-list" v-if="teacherCouser.recommend.length > 0">
			<view class="title f_32 f_normal">更多推荐</view>
			<course-list :selectList="teacherCouser.recommend" :lat="latitude" :lon="longitude" :listType="0" @bind-index="toTeacherDetail"></course-list>
		</view>
		<!-- 底部 -->
	</block>
	<page-empty v-else :emptyText="emptyText" paddingTop="70px" @comEmptyBtn="bindEmptyBtn"></page-empty>
	</view>
</template>

<script>
import articleList from '@/components/article-list/index.vue'; // 文章列表组件
import jyfParser from '@/components/jyf-parser/jyf-parser';
import { commonMixinFun } from '@/static/mixins/common.js';
import { changeFormat } from '@/static/mixins/changeFormat.js';
import { pageEmpty } from '@/static/mixins/pageEmpty.js';
import API from '@/static/api/index.js';
import { toPage } from '@/static/uitls/common.js';
const app = getApp();
export default {
	mixins: [commonMixinFun,changeFormat,pageEmpty],
	components: {
		jyfParser,
		articleList
	},
	data() {
		return {
			id:'',
			article: {},
			domain: app.globalData.BASE_URL, //主域名，设置后将对于图片地址将自动拼接主域名或协议名
			recommend: [],
			teacherCouser:{}
		};
	},
	onLoad(option) {
		app._log("option",option)
		if(!option.hasOwnProperty('id')&&!option.hasOwnProperty('scene')){
			this.pageTo('',{},'back')
		}else{
		this.id = option.hasOwnProperty('scene')?decodeURIComponent(option.scene).split('=')[1]:option.id;
			// this.id=otion.id
			this.getArticleDetail(option.id)
		}
		app._log(option)
	},
	methods: {
		//查看更多
		more(){
			toPage('/pages/article_list/index',{})
		},
		parse(e) {
			app._log('parse finish', e);
		},
		ready(e) {
			app._log('ready', e);
			// app._log('api: getText', this.$refs.article.getText());
			app._log('imgList', this.$refs.article.imgList);
		},
		imgtap(e) {
			app._log('点击图片', e);
		},
		linkpress(e) {
			app._log('复制链接', e);
		},
		error(e) {
			console.error(e);
		},
		// 点击文章
		bindArticleDetail(index) {}, //在组件内直接跳转了
		
		getArticleDetail(id){
			API.getArticleDetail({article_id:id}).then(res=>{
				app._log(res)
				if(res.code==1){
					this.article = res.data.article
					this.recommend = res.data.recommend
				}else{
					this.emptyText = '页面已丢失，是否返回上一页？'
				}
			}).catch(err=>{
				this.emptyText = '网络加载失败，白小可很无奈'
			})
		},
		onShareAppMessage() {
			return {
				title:'文章详情',
				path: "/pages/article_details/index?id=" + this.id
			}
		}
	}
};
</script>

<style lang="scss">
.page{
	background-color: #fff;
}
.article_image{
	font-size: 0;
	image{
		width: 654rpx;
		height: 328rpx;
		border-radius: 16rpx;
		margin-top: 40rpx;
	}
}
.article_{
	&top{
		padding: 24rpx 48rpx 40rpx 48rpx;
		.article_top{
			&_title{
				font-size: 36rpx;
				color: #252748;padding-bottom: 24rpx;
			}
			&_time{
				font-size: 24rpx;
				line-height: 34rpx;
				color: #8f8f9a;
			}
		}
	}
	&share {
		padding: 32rpx 286rpx;
		background-color: #f8f8f8;
		&_btn{
			width: 176rpx;
			height: 76rpx;
			background-color: rgba(127, 74, 255, 0.08);
			border-radius: 8rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			.p-r{
				width: 44rpx;
				height: 44rpx;
				z-index: 99;
			}
			text{
				font-size: 32rpx;
				color: #7f4aff;
			}
		}
	}
	&list{
		&_top{
			padding: 32rpx 48rpx 0;
			.get_more{
				image{
					width: 24rpx;
					height: 24rpx;
					margin-right: 2rpx;
				}
			}
		}
		
	}
	
}
.look_num{
	padding: 24rpx 48rpx;
}
.article_share{
	&_btn{
		position: relative;
	}
	button{
		position:absolute!important;
		padding: 0!important;
		background: none!important;
	}
}
</style>
